<!--
 * @Author: meifeng mei.feng@asiainfo-sec.com
 * @Date: 2023-08-04 15:33:29
 * @LastEditors: meifeng mei.feng@asiainfo-sec.com
 * @LastEditTime: 2023-09-25 11:49:43
 * @FilePath: \admin_vue\src\views\Itms.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${meifeng}, All Rights Reserved.
-->
<template>
  <div class="itms">
    <header>
      <!-- <img class="top-title-bg" src="../assets/top_title_bg.png" alt=""> -->
      <el-row type="flex" align="bottom" style="height: 100%;">

        <el-col :span="8" class="header-left-info">
          <div class="info-content">
            <span>终端状态：</span>
            <span class="left-button">在线</span>
          </div>
        </el-col>
        <el-col :span="8" class="header-content">
          <div>新疆企业网关实时运行监控</div>
        </el-col>
        <el-col :span="8" class="header-right-info">
          <div class="info-date">
            <el-row>
              <el-col :span="5" :offset="15">{{date}}</el-col>
              <el-col :span="2"  :offset="1">{{time}}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </header>
    <section>
        <el-row style="height: calc(50% - 20px);" :gutter="20">
          <el-col :span="8">
            <div class="section-common-border">
              <div class="section-common-title title1">光功率</div>
              <ve-line
                            height="calc(100% - 14px)"
                            :data="chartData4"
                            :extend="energyPowerChartExtend">
              </ve-line>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="section-common-border">
              <div class="border-content">
                <div class="section-common-title title2">硬件属性</div>
                  <div class="section-hard-wrap">
                    <div class="hard-warp-item">
                        <div class="item1 bk1"></div>
                        <div class="item2">终端厂家</div>
                        <div class="item3">华为</div>
                    </div>
                    <div class="hard-warp-item">
                        <div class="item1 bk2"></div>
                        <div class="item2">设备型号</div>
                        <div class="item3">H267</div>
                    </div>
                    <div class="hard-warp-item">
                        <div class="item1 bk3"></div>
                        <div class="item2">工作温度</div>
                        <div class="item3">42℃</div>
                    </div>
                    <div class="hard-warp-item">
                        <div class="item1 bk4"></div>
                        <div class="item2">光猫WIFI是否使用</div>
                        <div class="item3">是</div>
                    </div>
                  </div>
              </div>
              <div class="border-content">
                <div class="section-common-title title2">网络属性</div>
                <div class="section-hard-wrap">
                  <div class="hard-warp-item">
                      <div class="item1 bk5"></div>
                      <div class="item2">WAN口状态</div>
                      <div class="item3">在线</div>
                  </div>
                  <div class="hard-warp-item">
                      <div class="item1 bk6"></div>
                      <div class="item2">宽带状态</div>
                      <div class="item3">在线</div>
                  </div>
                  <div class="hard-warp-item">
                      <div class="item1 bk7"></div>
                      <div class="item2">网络模式</div>
                      <div class="item3">桥接</div>
                  </div>
                  <div class="hard-warp-item">
                      <div class="item1 bk8"></div>
                      <div class="item2">光猫运行时间</div>
                      <div class="item3">3000小时</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="section-common-border">
              <div class="section-common-title title5">LAN口状态</div>
               <div class="common-title-table"  style="height: calc(100% - 40px);">
                    <el-table
                    :header-cell-style="{'text-align':'center', 'font-size':'16px', 'color':'#88B3E6', 'font-weight':'600'}"
                    :data="tableData"
                    style="width: 100%;">
                    <el-table-column
                      align="center"
                      prop="order"
                      label="序号"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="status"
                      label="状态"
                      width="80"
                    >
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="Lspeed"
                      label="下行速度（Mbps）">
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="Hspeed"
                      label="下行速度（Mbps）">
                    </el-table-column>
                  </el-table>
               </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="height: calc(50% - 20px);" :gutter="20">
          <el-col :span="9">
            <div class="section-common-border">
              <div class="section-common-title title3">PING测试</div>
              <ve-line
                            height="calc(100% - 14px)"
                            :data="chartData5"
                            :extend="pingChartExtend">
              </ve-line>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="section-common-border">
              <div class="section-common-title title2">网络带宽</div>
              <div style="height: calc(100% - 24px); margin-top: 10px;" id="netPie"></div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="section-common-border">
              <div class="section-common-title title4">PON口用户数</div>
              <div style="height: calc(100% - 24px); margin-top: 10px;" id="pieLine"></div>
            </div>
          </el-col>
        </el-row>
    </section>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { VeLine } from 'v-charts'
import moment from '../utils/date.js'
import {
    getEnergyOption,
    getEnergyOption2,
    getPersonOption,
} from '../utils/emsChartOption.js'

export default {
    name: 'Itms',
    components: {
        VeLine,
    },
    data() {
        this.date = moment.getDate()
        this.personChartExtend = getPersonOption()
        /* 能耗用电 */
        this.energyPowerChartExtend = getEnergyOption(
            'rgba(12,175,205,1)',
            'rgba(12,175,205,1)',
            'dB'
        )
        this.pingChartExtend = getEnergyOption2(
            'rgba(12,175,205,1)',
            'rgba(25,193,136,1)',
            'ms'
        )
        return {
            time: moment.getTime(),
            chartData1: [
                { name: '2.4G', value: 20 },
                { name: '5G', value: 30 },
                { name: '多频合一', value: 50 },
            ],
            netPieOption: {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    itemGap: 30,
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                },
                color: ['#19C188', '#3F77FF', '#EC9E36'],
                series: [
                    {
                        name: '带宽',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            color: '#fff',
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                // fontSize: 20,
                                fontWeight: 'bold',
                                formatter: [
                                    '{x|{d}%}',
                                    '{y|{b}}',
                                ].join('\n'),
                                rich: {
                                    x: {
                                        color: '#A3CEF9',
                                        fontSize: 30,
                                    },
                                    y: {
                                        color: '#fff',
                                        fontSize: 20,
                                    },
                                },
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [],
                    },
                ],
            },
            pieLineOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                },
                legend: {
                    data: ['2023年用户数', '2022年用户数'],
                    top: '5%',
                    left: 'center',
                    itemGap: 30,
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow',
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#ccc',
                                fontSize: 14,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '用户数',
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 16,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ccc',
                                fontSize: 16,
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed', // y轴分割线类型
                            },
                        },
                    },
                    {
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed', // y轴分割线类型
                            },
                        },
                        axisLabel: {
                            position: 'left',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 16,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '2023年用户数',
                        type: 'bar',
                        color: '#3F78C5 ',
                        data: [
                            213, 412, 323, 311, 255, 411, 233, 123, 223, 323, 423, 123, 123,
                        ],
                    },

                    {
                        name: '2022年用户数',
                        type: 'line',
                        color: '#19C188',
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        yAxisIndex: 1,
                        data: [213, 412, 323, 311, 455, 311, 233, 123, 223, 123, 423, 323, 123],
                    },
                ],
            },
            tableData: [{
                order: 'LAN1',
                status: '离线',
                Lspeed: '120',
                Hspeed: '120',
            }, {
                order: 'LAN2',
                status: '离线',
                Lspeed: '24',
                Hspeed: '120',
            }, {
                order: 'LAN3',
                status: '离线',
                Lspeed: '56',
                Hspeed: '120',
            }, {
                order: 'LAN4',
                status: '离线',
                Lspeed: '11',
                Hspeed: '120',
            }, {
                order: 'LAN5',
                status: '离线',
                Lspeed: '22',
                Hspeed: '120',
            }, {
                order: 'LAN6',
                status: '离线',
                Lspeed: '22',
                Hspeed: '120',
            }, {
                order: 'LAN7',
                status: '离线',
                Lspeed: '22',
                Hspeed: '120',
            }, {
                order: 'LAN8',
                status: '在线',
                Lspeed: '22',
                Hspeed: '120',
            }],
            chartData4: {
                columns: ['时刻', 'dB'],
                rows: [
                    { 时刻: '0:00', dB: 5 },
                    { 时刻: '3:00', dB: 5 },
                    { 时刻: '6:00', dB: 10 },
                    { 时刻: '9:00', dB: 15 },
                    { 时刻: '12:00', dB: 20 },
                    { 时刻: '15:00', dB: 25 },
                    { 时刻: '18:00', dB: 21 },
                    { 时刻: '21:00', dB: 20 },
                    // { 时刻: '0:00', dB: 23 }
                ],
            },
            chartData5: {
                columns: ['时刻', 'ms', '丢包率'],
                rows: [
                    { 时刻: '0:00', ms: 5, 丢包率: 1 },
                    { 时刻: '3:00', ms: 5, 丢包率: 4 },
                    { 时刻: '6:00', ms: 10, 丢包率: 2 },
                    { 时刻: '9:00', ms: 15, 丢包率: 8 },
                    { 时刻: '12:00', ms: 20, 丢包率: 6 },
                    { 时刻: '15:00', ms: 25, 丢包率: 10 },
                    { 时刻: '18:00', ms: 21, 丢包率: 7 },
                    { 时刻: '21:00', ms: 20, 丢包率: 1 },
                    // { 时刻: '0:00', dB: 23 }
                ],
            },
        }
    },
    mounted() {
        this.initPie()
        this.initPieLine()
        this.timer = setInterval(() => {
            this.time = moment.getTime()
        }, 1000)
    },
    methods: {
        initPie() {
            this.netPieOption.series[0].data = this.chartData1
            const chartDom = document.getElementById('netPie')
            const myChart = echarts.init(chartDom)
            myChart.setOption(this.netPieOption)
        },
        initPieLine() {
            // this.pieLineOption.series[0].data = this.chartData1;
            const chartDom = document.getElementById('pieLine')
            const myChart = echarts.init(chartDom)
            myChart.setOption(this.pieLineOption)
        },
    },
}
</script>

<style lang="scss" scoped>
@import url('../styles/index.scss');
.itms {
  height: 100vh;
  background-image: url(../assets/background.png);
  background-size: 100% 100%;
  background-position: center;
  header{
    height: 7.6%;
    margin-bottom: 20px;
    background-image: url(../assets/header.png);
    background-size: 100% 100%;
    background-position: center;
    .header-left-info {
      font-size: 16px;
      color: #CCCCCC;
      // position: absolute;
      padding-left: 21px;
      .info-content{
        position: absolute;
        bottom: 2px;
        .left-button {
          position: relative;
          background: rgba(34,178,65,0.10);
          border: 1px solid rgba(255,255,255,0.6);
          border-radius: 15px;
          padding: 5.5px 12px 5.5px 28px;
          &::before {
            position: absolute;
            content: '';
            background: #22B241;
            height: 8px;
            width: 8px;
            border-radius: 50%;
            top:11px;
            left:12px;
          }
        }
      }
    }
    .header-content{
      font-family: PingFangSC-Semibold;
      font-size: 40px;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 58px;
      font-weight: 600;
      text-align: center;
    }
    .header-right-info {
      display: flex;
      justify-content: flex-end;
      flex-flow: column;
      text-align: end;
      font-family: DINAlternate-Bold;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 700;
      margin-right: 20px;
    }
  }
  section {
    height: calc(92.4% - 20px);
    padding: 0 20px;
    .border-content{
      height: 50%;
      .section-hard-wrap{
      display:flex;
      justify-content: space-around;
      margin-top: 30px;
      margin-bottom: 28px;
      .hard-warp-item{
        display:flex;
        flex-direction: column;
        align-items: center;
        .item1{
          background-size: 100% 100%;
          height: 46px;
          width: 46px;
          line-height: 46px;
          margin-bottom: 16px;
          &.bk1 {
            background-image: url(../assets/终端厂家@3x.png);
          }
          &.bk2 {
            background-image: url(../assets/设备型号@3x.png);
          }
          &.bk3 {
            background-image: url(../assets/工作温度@3x.png);
          }
          &.bk4 {
            background-image: url(../assets/光猫WIFI是否使用@3x.png);
          }
          &.bk5 {
            background-image: url(../assets/LAN口状态@3x.png);
          }
          &.bk6 {
            background-image: url(../assets/宽带状态@3x.png);
          }
          &.bk7 {
            background-image: url(../assets/网络模式@3x.png);
          }
          &.bk8 {
            background-image: url(../assets/光猫上次重启时间@3x.png);
          }
        }
        .item2 {
          font-size: 16px;
          color: #CCCCCC;
          line-height: 16px;
          font-weight: 400;
          margin-bottom:20px;
        }
        .item3 {
          font-size: 24px;
          color: #A3CEF9;
          line-height: 24px;
          font-weight: 600;
        }
      }
    }
    }

    // LAN口状态
    .common-title-table{
      margin-top:20px
    }

  }
}
</style>
<style>
.el-col-8,.el-col-6,.el-col-9 {
  height: 100%;
}
</style>
